import React, { useEffect } from 'react'
import { Input, Row, Col, Button, Space } from 'antd'
import { SwapOutlined } from '@ant-design/icons'
const scaleComponents = (props) => {
    const {
        data = {},
        index,
        selectIndex,
        onChange
    } = props
    const {
        title,
        type,
        label,
        require = false,
        desc,
        rule = 'order',
        orderValue = '',
        reverseValue = '',
        scaleType,
        scaleNum = 5,
        option = []
    } = data
    console.log(rule)
    useEffect(() => {
        console.log(option, '重置')
        if (option.length && scaleType === 'custom') {
            let newList = []
            for (let i = 1; i <= scaleNum; i++) {
                if (option[i - 1]) {
                    newList.push(option[i - 1])
                }
                else {
                    newList.push('')
                }
            }
            onChange({
                changeType: 'update',
                data: {
                    ...data,
                    option: newList
                },
                index: index
            })
        }
        else {
            let newList = []
            if (rule === 'order') {
                for (let i = scaleNum; i >= 1; i--) {
                    newList.push(i)
                }
            } else {
                for (let i = 1; i <= scaleNum; i++) {
                    newList.push(i)
                }
            }

            onChange({
                changeType: 'update',
                data: {
                    ...data,
                    option: newList
                },
                index: index
            })
        }
    }, [scaleNum, scaleType])
    const renderScaleNum = () => {
        if (scaleType === 'custom') {
            return <Space wrap={true} size={'large'}>
                {option.map((item, val) => {
                    return <div key={val} style={{
                        border: '1px solid #eeeeee', width: 84, height: 32, display: 'flex',
                        alignItems: "center", justifyContent: 'center'
                    }} ><Input style={{ textAlign: 'center' }} onChange={(e) => {
                        onChange({
                            changeType: 'update',
                            data: {
                                ...data,
                                option: option.map((item, c) => {
                                    if (c === val) {
                                        return e.target.value
                                    }
                                    else {
                                        return item
                                    }
                                })
                            },
                            index: index
                        })
                    }} value={item}></Input></div>
                })}
            </Space>
        }
        else {
            return <Space wrap={true} size={'large'}>
                {option.map((item, index) => {
                    return <div key={index} style={{
                        border: '1px solid #eeeeee', width: 84, height: 32, display: 'flex',
                        alignItems: "center", justifyContent: 'center'
                    }} >{item}</div>
                })}
            </Space>
        }

    }
    return <div onClick={(e) => {
    }}>
        <Row style={{ padding: 24, background: "#ffffff" }} gutter={[36, 12]}>
            <Col style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} span={24}>
                <div>{require ? <span style={{ marginRight: 4, color: 'red' }}>*</span> : ''}{index}.{title}</div>
                <div>
                    {selectIndex == index ? <Space>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'coby',
                                data: data,
                            })
                        }}>复制</Button>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'delete',
                            })
                        }}>删除</Button>
                    </Space> : ''}
                </div>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            label: e.target.value,

                        },
                        index: index
                    })
                }} value={label} placeholder='请输入题目标题'></Input>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            desc: e.target.value
                        },
                        index: index
                    })
                }} value={desc} placeholder='请输入题目描述（选填）'></Input>
            </Col>
            <Col style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }} span={12} offset={6}>
                <div>  {scaleType === 'custom' ? <Input onChange={(e) => {
                    const dataObj = {}
                    console.log(e.target.value, '12312312312')
                    if (rule === 'order') {
                        dataObj.orderValue = e.target.value
                    }
                    if (rule === 'reverse') {
                        dataObj.reverseValue = e.target.value
                    }
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            ...dataObj
                        },
                        index: index
                    })
                }} value={rule === 'order' ? orderValue : reverseValue} width={120}></Input> : rule === 'order' ? orderValue : reverseValue}  </div>
                <div>
                    <SwapOutlined onClick={() => {
                        onChange({
                            changeType: 'update',
                            data: {
                                ...data,
                                rule: rule === 'order' ? 'reverse' : 'order',
                                option: option.reverse()
                            },
                            index: index
                        })
                    }} />
                </div>
                <div> {scaleType === 'custom' ? <Input onChange={(e) => {
                    const dataObj = {}
                    if (rule === 'reverse') {
                        dataObj.orderValue = e.target.value
                    }
                    if (rule === 'order') {
                        dataObj.reverseValue = e.target.value
                    }
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            ...dataObj
                        },
                        index: index
                    })
                }} value={rule === 'reverse' ? orderValue : reverseValue} width={120}></Input> : rule === 'reverse' ? orderValue : reverseValue} </div>
            </Col>
            <Col span={12} offset={6}>
                {renderScaleNum()}
            </Col>

        </Row>
    </div>
}
export default scaleComponents